<script setup lang="ts">

import {getBaseImgUtl, getFixedPositionNumStr, goToRouter} from "@/utils/CommonUtils.ts";
</script>

<template>
  <ReturnPageBtn @click='goToRouter("/main")' align="left" content="返回主页"/>
  <div class="image-box">
    <div class="img-div" v-for="(index) in 94" :key="index">
      <img width="150" height="150" v-lazy="getBaseImgUtl('/music/songListImg/song-list-zip-'+getFixedPositionNumStr(index,4)+'.jpg')">
      <div class="img-index"><span>{{index}}</span></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.image-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  .img-div {
    display: flex;
    flex-direction: column;
    width: 18rem;
    height: 20rem;
    margin: 2rem;
    background: rgba(#ccc,0.3);
    border-radius: 1rem;
    padding-bottom: 1rem;
    img{
      margin: auto;
    }
    .img-index{
      display: flex;
      justify-content: center;

      span{
        font-family: "JetBrainsMono Bold";
        font-size: 1.6rem;
      }
    }
  }
}
</style>